<template>
  <div class="layoutHome-wrap">
    <div class="layout-sidebar-wrap">
      <span class="layout-sidebar-shrink" v-if="!isHideSidebar" @click="toShrink"></span>
      <span class="layout-sidebar-shrink layout-sidebar-open" v-else @click="toShrink"></span>
      <!--left start-->
      <BhfbSidebar v-if="!isHideSidebar"></BhfbSidebar>
      <!--left edn-->
    </div>

    <div class="layout-assist-wrap">
      <span class="layout-assit-shrink" v-if="!inHideAssist" @click="toShrinkAssit"></span>
      <span class="layout-assit-shrink layout-assit-open" v-else @click="toShrinkAssit"></span>
      <BhfbAssist v-if="!inHideAssist"></BhfbAssist>
    </div>

    <!-- <div class="layout-main-wrap"> -->
      <!--main start-->
      <!-- <layout-main></layout-main> -->
      <!--main edn-->
    <!-- </div> -->

    <bh-lengend></bh-lengend>

    <!--   宝塔项目用到的 地区下拉框   -->
    <area-select @on-select="handleSelect" :current-key="areaKey" v-if="false"></area-select>
    <!--   快速查询左侧输入框弹窗   -->
    <quick-search @on-search="handleSearch" v-if="false"></quick-search>
    <!--   人员病患查询结果弹窗   -->
    <pop-member-list v-if="false"></pop-member-list>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import BhfbAssist from '@/views/wsyj/BhfbModule/BhfbAssist.vue';
import BhfbSidebar from '@/views/wsyj/BhfbModule/BhfbSidebar.vue';
import layoutMain from '@/views/classic/LayoutMain.vue';
import BhLengend from '@/components/common/gis/lengend/Bhlengend.vue';
import AreaSelect from '@/components/common/AreaSelect.vue';
import QuickSearch from '@/components/common/QuickSearch.vue';
import PopMemberList from '@/components/common/PopMemberList.vue';
import MapCommon from '@/util/MapCommon';
import PopBhDetail from "@/components/common/gisPop/PopBhDetail.vue";

@Component({
  name: 'BhfbHome',
  components: {
    // BhfbTree,
    BhfbSidebar,
    layoutMain,
    BhfbAssist,
    BhLengend,
    AreaSelect,
    QuickSearch,
    PopMemberList
  },
  mixins: [MapCommon] // GIS 将地图解析方法混入当前组件
})
export default class BhfbHome extends Vue {
  private MapComp: any = null;
  private isHideSidebar = false;
  private inHideAssist = false;
  private areaKey: any = '1';
  private handleSelect(e: any) {
    this.areaKey = e;
  }
  private handleSearch(key: any) {
    console.log(key);
  }
  private toShrink() {
    this.isHideSidebar = !this.isHideSidebar;
  }
  private toShrinkAssit() {
    this.inHideAssist = !this.inHideAssist;
    this.$store.dispatch('layoutModule/isHideAssistEmit', this.inHideAssist);
  }
  private beforeDestroy() {
    this.$store.state['BhfbModule' as any].bhfbMap.unload();
  }
  private mounted() {
    (this as any).resolveMap('map').then(() => {
      this.MapComp = this.getComponent();
      this.$store.dispatch('BhfbModule/bhfbMapEmit', this.MapComp);
      this.MapComp.on('popup', this.onPuppup, this);
      this.MapComp.load();
    });
  }
  // 获取地图功能
  private getComponent() {
    const self: any = this;
    const modules = self.$ioc.resolve('GISModules-map');
    const component = modules.eventSituation.getComponent('sicknessDistribute');
    return component;
  }
  private onPuppup(data: any) {
    const self = this;
    const $vm: any = {
      el: '#' + data.containerId,
      data() {
        return {
          popData: data.data
        };
      },
      methods: {
        closeDetailPop() {
          self.MapComp.closePopup();
        }
      },
    };
    const temp: any = new PopBhDetail($vm);
  }
}
</script>
<style lang="less" scoped>
@import url('../../../assets/css/Layout.less');
</style>
